<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon">&#xe699;</div>
    </div>
    <div class="header-input">
      <span class="iconfont">&#xe600;</span>
        输入城市/景点/游玩主题
    </div>
    <router-link to="/city">
        <div class="header-right">
          <span class="iconfont arrow-icon">&#xe6a8;</span>
            {{this.city}}
        </div>
    </router-link>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name:'Header',
    computed:{
      ...mapState(['city'])
    }
}
</script>

<style scoped>
 .header{
   line-height:0.86rem;
   display: flex;
   background:#00bcd4;
   color:#fff;
 }
 .header-left{
   width:0.64rem;
   float:left;
 }
 .back-icon{
   text-align: center;
   font-size:0.4rem;
 }
 .header-input{
   margin-top:0.12rem;
   height:0.64rem;
   line-height: 0.64rem;
   flex:1;
   background:#fff;
   border-radius:0.1rem;
   color:#ccc;
   padding-left:0.2rem;
 }
 .header-right{
   min-width:1.04rem;
   padding:0 0.1rem;
   float:right;
   text-align: center;
   color:#fff;
 }
 .arrow-icon{
   margin-left:-0.04rem;
   font-size:0.24rem;
 }
</style>